<template>
  <!-- <a-button type="primary" @click="toggleDark">
    {{ dark ? "Light" : "Dark" }}
  </a-button> -->
  <a-switch
    v-model:checked="isDarkMode"
    @change="toggleDark"
    :checkedChildren="marks[1]"
    :unCheckedChildren="marks[0]"
  />
</template>

<script>
import { toDark } from "@/utils/dark-css";
import { Switch } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "DarkThemeSwitch",
  components: {
    // "a-button": Button,
    "a-switch": Switch,
  },
  data() {
    return {
      dark: this.$store.getters["settings/isDark"], // 获取暗黑模式状态
    };
  },
  methods: {
    toggleDark() {
      // 反转 dark 的状态
      this.dark = !this.dark;
      console.log(`更新的dark = ${this.dark}`);

      // 更新 CSS
      toDark(this.dark);

      // 如果新的 dark 状态和 Vuex 中的不同，进行更新
      if (this.dark !== this.$store.getters["settings/isDark"]) {
        this.$store.dispatch("settings/setDark", this.dark); // 发起 Vuex 动作以改变状态
      }
    },
  },
  setup() {
    const store = useStore();
    const isDarkMode = ref(store.getters["settings/isDark"]); // 从 Vuex 获取状态
    const marks = ["Light", "Dark"]; // 显示的主题标记

    return {
      isDarkMode,
      marks,
    };
  },
});
</script>
